<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view class="p-3" style="background-color: #ffffff;position: relative;z-index: -2;" v-if="member.cardId > 0">
		<view class="position-relative mt-1">
			<view class="card-box flex flex-column align-center justify-center">
				<view class="align-center">
					<image src="/static/images/mine/vip.png" class="vip-img"></image>
				</view>
				<view  class="font-price">{{ card.name }}</view>
				<view  class="font-time">{{ card.period == 0 ? '永久有效' : card.period + '月有效期'}}</view>
			</view>
			<view class="cart-box-bg"><image :src="card.styleImg"></image></view>
		</view>
	</view>
	<view class="p-3 bg-white">
		<view class="flex justify-center align-center">
			<uv-line length="20%" color="#2979ff"></uv-line>
			<text class="mx-1 font-weight-bolder">会员特权</text>
			<uv-line length="20%" color="#2979ff"></uv-line>
		</view>
		<view class="py-5">
			<uv-grid :border="false" :col="3">
				<uv-grid-item v-if="card.discount > 0">
					<image src="/static/images/mine/zk.png" style="width: 60rpx;height: 60rpx;" ></image>
					<text class="font-size-sm text-color-assist my-2">开卡享{{ card.discount }}折</text>
				</uv-grid-item>
				<uv-grid-item v-if="card.integral > 0">
					<image src="/static/images/mine/jf.png" style="width: 60rpx;height: 60rpx;" ></image>
					<text class="font-size-sm text-color-assist my-2">开卡赠送{{ card.integral }}积分</text>			
				</uv-grid-item>
				<uv-grid-item v-if="card.mony > 0">
					<image src="/static/images/mine/yue.png" style="width: 60rpx;height: 60rpx;" ></image>
					<text class="font-size-sm text-color-assist my-2">开卡赠送{{ card.mony }}元</text>			
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="flex justify-center align-center">
			<uv-line length="20%" color="#2979ff"></uv-line>
			<text class="mx-1 font-weight-bolder">使用说明</text>
			<uv-line length="20%" color="#2979ff"></uv-line>
		</view>
		<view class="mt-5 font-size-sm">
			<rich-text :nodes="card.rule"></rich-text>
		</view>
		<view class="font-size-base text-color-base font-weight-bold" style="margin-bottom: 20rpx;margin-top: 80rpx;" v-if="member.cardId == '' || member.cardId == 0">支付方式</view>
		<list-cell last v-if="member.cardId == '' || member.cardId == 0">
			<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
				<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A"></view>
				<view class="flex-fill">微信支付</view>
				<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'weixin'">
				</view>
				<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
			</view>
		</list-cell>
	</view>

	<view class="fixed-bottom" style="background-color: #e45656;padding: 30rpx 0;text-align: center;"  @click="buy" v-if="member.cardId == '' || member.cardId == 0">
		<text class="text-white">立即购买</text>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onLoad} from '@dcloudio/uni-app'
import {
  getCardDetail,
  cardBuy
} from '@/api/user'
import { isWeixin } from '@/utils/util'
import {
  payUnify,
  getWechatConfig
} from '@/api/order'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
// #ifdef H5
import * as jweixin from 'weixin-js-sdk'
// #endif

const main = useMainStore()
const { member } = storeToRefs(main)


const title = ref('会员卡详情')
const card = ref({})
const payType = ref('weixin')
const cardId = ref(0)

onLoad((option) => {
	cardId.value = option.id
	getDetail(option.id);
})

const getDetail = async(id) => {
	let data = await getCardDetail({id:id});
	if (data) {
		card.value = data;
	}
}

const buy  = async() => {

	let resData = await cardBuy({
		cardId: cardId.value
	});
	if (!resData) {
		return;
	}
	let order = {orderId:resData}
	
	if (payType.value == 'weixin') {
		// 微信支付
		weixinPay(order);
	} else if (payType.value == 'alipay') {
		// 余额支付
		aliPay(order);
	} 
	
	
}
const weixinPay = async(order) => {
	let from = 'routine'
	// #ifdef H5
	from = 'h5'
	if(isWeixin()){
		from = 'wechat'
	}
	
	// #endif
	//let that = this;
	let data = await payUnify({
		uni: order.orderId,
		from: from,
		paytype: 'weixin'
	});
	if (!data) {
		return;
	}
	if (data.trade_type == 'MWEB') {
		// #ifdef H5
		// 微信外的H5
		location.href = data.data;
		// #endif
	} else if (data.trade_type == 'JSAPI') {
		console.log('param:',data)

		// #ifdef MP-WEIXIN
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data.data.timeStamp,
			nonceStr: data.data.nonceStr,
			package: data.data.package,
			signType: 'MD5',
			paySign: data.data.paySign,
			success: function(res) {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});
		// #endif
	} else if (data.trade_type == 'W-JSAPI'){
		//公众号支付
		let config = await getWechatConfig();
		console.log('config:',config)
		if (config) {
		  jweixin.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		        appId: config.appId, // 必填，公众号的唯一标识
		        timestamp: config.timestamp, // 必填，生成签名的时间戳
		        nonceStr: config.nonceStr, // 必填，生成签名的随机串
		        signature: config.signature, // 必填，签名
		        jsApiList: [
		          'chooseWXPay'
		        ] ,
			 }
			);
		  jweixin.ready(function() {
		   jweixin.chooseWXPay({
			timestamp: data.data.timeStamp, 
			nonceStr: data.data.nonceStr, 
			package:  data.data.package, 
			signType: 'MD5', 
			paySign: data.data.paySign, 
			success: function(res) {
			 uni.removeStorageSync('cart');
			 uni.switchTab({
			  url: '/pages/mine/mine'
			 });
			},
			fail: function(err) {
			  console.log(res)
			}
		   });
		  });
		   jweixin.error(function(res) {
				console.log(res)
		  });
		 } else {
			// console.log(res)
	  }
		
	}
}

</script>


<style lang="scss" scoped>
	.card-box {
		color: #ffffff;
		height: 400rpx;
		padding: 30rpx;
		text-align: center;
		
		.font-price {
			margin-top: 10rpx;
			font-size: 50rpx;
		}
		.font-time {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
		.font-more {
			margin-top: 80rpx;
			font-size: 24rpx;
		}
	
	}
	.vip-img {
		width: 40rpx;
		height: 40rpx;
	}
	.cart-box-bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		
		image {
			width: 690rpx;
			height: 400rpx;
		}
	}
	
</style>